<template>
  <div class="container">
    <van-nav-bar
      fixed
      title="首页"
    />
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item
        v-for="(item) in swiperList"
        :key="item.id"
      >
        <img
          class="banner-img"
          :src="'http://124.223.14.236:8060/'+item.advimgsrc"
          alt=""
        />
      </van-swipe-item>

    </van-swipe>
    <!-- 通知 -->
    <van-notice-bar
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 热门推荐 -->
    <van-cell>
      <h3
        slot="title"
        class="group-title"
      >热门推荐</h3>
    </van-cell>
    <recommendList :hotlist="hotList" />
    <!-- 最近更新 -->
    <van-cell>
      <h3
        slot="title"
        class="group-title"
      >最近更新</h3>
      <span>24小时： <b>{{num_day
      }}篇</b></span> /
      <span>1周： <b>{{ num_week }}篇</b></span>
    </van-cell>
    <articleList :articlelist="updateList" />
  </div>
</template>
<script>
import { getswiper, gethot, getupdate } from '@/api/index.js'
import articleList from '@/components/article-list.vue'
import RecommendList from '../components/recommend-list.vue'

export default {
  components: { articleList, RecommendList },
  data () {
    return {
      swiperList: [],
      hotList: [],
      updateList: [],
      num_day: 0,
      num_week: 0,
      params: {
        page: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getlunbo()
    this.gethoted()
    this.getnews()
  },
  methods: {
    async getlunbo () {
      const res = await getswiper()
      // console.log(res);
      if (res.errno === 0) {
        this.swiperList = res.data.banner
      }
    },
    async gethoted () {
      const res = await gethot()
      // console.log(res);
      if (res.errno === 0) {
        this.hotList = res.data.list
      }
    },
    async getnews () {
      const res = await getupdate(this.params)
      console.log(res);
      if (res.errno === 0) {
        this.updateList = res.data.list.data
        this.num_day = res.data.num_day
        this.num_week = res.data.num_week
      }
    }
  }
}
</script>
<style scoped lang="less">
.banner-img {
  width: 100%;
}
.group-title {
  color: #1989fa;
}
</style>
